<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Insert title here</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<!-- 最新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script	src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script	src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div th:fragment="pageList" th:with="pageCount=${page.totalPage},rowCount=${page.totalRecord},pageNum=${page.pageNo},
pageSize=${page.pageSize},actionUrl=${page.actionUrl},params=${page.params}">
	<div th:if="${rowCount==0}" class="text-center text-danger" th:text="没有相关记录"></div>
	<nav class="mt-5" th:if="${rowCount>0}">
		<!-- 处理页数小于等于7的情况 -->
        <ul class="pagination pagination-sm justify-content-end" th:if="${pageCount le 7 && pageCount ge 1}">
        	<span class="text-info" th:text="|每页 ${pageSize} 条记录 共  ${rowCount} 条记录 共 ${pageCount} 页|"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        	<li th:class="|page-item ${pageNum==1?'disabled':''}|"> 
                <a class="page-link" href="#" th:onclick="pageRequest(1)" >
					<span aria-hidden="true">|&lt;</span>
		        	<span class="sr-only">First</span>
				</a>
            </li>
            <li th:class="|page-item ${pageNum==1?'disabled':''}|">
            	<a class="page-link" href="#" aria-label="Previous" th:onclick="pageRequest([[${pageNum-1}]])">
		        	<span aria-hidden="true">&laquo;</span>
		        	<span class="sr-only">Previous</span>
		      	</a>
            </li>
            <li th:class="|page-item ${i==pageNum?'active':''}|"
                th:each="i:${#numbers.sequence(1,pageCount)}">
                <a class="page-link" href="#" th:onclick="pageRequest([[${i}]])" th:text="${i}">1</a>
            </li>
            <li th:class="|page-item ${pageNum==pageCount?'disabled':''}|">
                <a class="page-link" href="#" th:onclick="pageRequest([[${pageNum+1}]])">
					<span aria-hidden="true">&raquo;</span>
        			<span class="sr-only">Next</span>		
				</a>
            </li>
            <li th:class="|page-item ${pageNum==pageCount?'disabled':''}|">
                <a class="page-link" href="#" th:onclick="pageRequest([[${pageCount}]])">
					<span aria-hidden="true">&gt;|</span>
        			<span class="sr-only">End</span>
				</a>
            </li>
        </ul>
               
        <!-- 处理页数大于7的情况 -->
        <ul class="pagination pagination-sm justify-content-end" th:if="${pageCount gt 7}" >
            <span class="text-info" th:text="|每页 ${pageSize} 条记录 共  ${rowCount} 条记录 共 ${pageCount} 页|"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
            <!-- 首页 -->
            <li th:class="|page-item ${pageNum==1?'disabled':''}|">
            	<a href="#" class="page-link" th:onclick="pageRequest(1)" >
					<span aria-hidden="true">|&lt;</span>
		        	<span class="sr-only">First</span>
				</a>
            </li>

			<!-- 上一页 -->
            <li th:class="|page-item ${pageNum==1?'disabled':''}|" href="#" aria-label="Previous">
                <a href="#" th:onclick="pageRequest([[${pageNum-1}]])" class="page-link">
                    <span aria-hidden="true">&laquo;</span>
		        	<span class="sr-only">Previous</span>
                </a>
            </li>

            <!-- 当前页号小于等于4 -->
            <li th:class="|page-item ${i==pageNum?'active':''}|" th:if="${pageNum le 4}" 
            	th:each="i : ${#numbers.sequence(1,5)}">
                <a href="#" class="page-link" th:onclick="pageRequest([[${i}]]) " th:text="${i}">1</a>
            </li>

            <li class="page-item disabled" th:if="${pageNum le 4}">
                <a class="page-link"><span aria-hidden="true">...</span></a>
            </li>

            <!-- 最后一页与当前页号之差，小于等于3 -->
            <li class="page-item disabled" th:if="${(pageCount-pageNum) le 3}">
                <a class="page-link"><span aria-hidden="true">...</span></a>
            </li>
            <li th:class="|page-item ${i==pageNum?'active':''}|" th:if="${(pageCount-pageNum) le 3}" 
            	th:each="i : ${#numbers.sequence(pageCount-4, pageCount)}">
                <a href="#" class="page-link" th:onclick="pageRequest([[${i}]])" th:text="${i}">1</a>
            </li>

            <!-- 最后一页与当前页号之差大于3，且 当前页号大于4-->
            <li class="page-item disabled" th:if="${(pageNum gt 4) && ((pageCount-pageNum) gt 3 )}">
                <a class="page-link"><span aria-hidden="true">...</span></a>
            </li>

            <li th:class="|page-item ${i==pageNum?'active':''}|" th:if="${(pageNum gt 4) && ((pageCount-pageNum) gt 3 )}" 
            	data-th-each="i : ${#numbers.sequence(pageNum-1, pageNum+3)}">
                <a href="#" th:onclick="pageRequest([[${i}]])" class="page-link" th:text="${i}">1</a>
            </li>

            <li class="page-item disabled" th:if="${(pageNum gt 4) && ((pageCount-pageNum) gt 3 )}">
                <a class="page-link"><span aria-hidden="true">...</span></a>
            </li>
   
            <!-- 下一页 -->
            <li  th:class="|page-item ${pageNum==pageCount?'disabled':''}|">
                <a class="page-link" href="#" th:onclick="pageRequest([[${pageNum+1}]])">
					<span aria-hidden="true">&raquo;</span>
        			<span class="sr-only">Next</span>		
				</a>
            </li>
            
            <!-- 最后一页 -->
            <li th:class="|page-item ${pageNum==pageCount?'disabled':''}|">
                <a class="page-link" href="#" th:onclick="pageRequest([[${pageCount}]])">
                	<span aria-hidden="true">&gt;|</span>
        			<span class="sr-only">End</span>
                </a>
            </li>
        </ul> 
    </nav>
<script type="text/javascript" th:inline="javascript">
function pageRequest(pageNum) {
	var url = [[${page.actionUrl}]];     
	var search = [[${page.params}]]; 
	var params='';
	Object.keys(search).forEach(function(key){
	     console.log(key,search[key]);
	     params+='&'+key+"="+(search[key]==null?'':search[key]);
	});
	//alert(params);
	var url1 = [[@{/}]]+url+'?pageNum='+pageNum+params;
	//alert(url1);
	location.assign(url1);
}
</script>
</div>
</body>
</html>
